<template>
  <PageCard title="七夕特供 · 专属网页生成器" titleEnglish="Love Story Website Generator">
    <div class="website-generator">
    
    <n-spin :show="loading" class="main-content">
      <n-form ref="formRef" :model="requestData" :rules="rules" size="large" class="beautiful-form">
        
        <!-- 主要信息区域 -->
        <div class="form-section">
          <div class="section-header">
            <n-icon :component="HeartIcon" class="section-icon" />
            <h3 class="section-title">主要信息</h3>
          </div>
          
          <n-card class="info-card" hoverable>
            <!-- 姓名输入行 -->
            <div class="form-row">
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="TitleIcon" />
                  <span>你的姓名</span>
                </label>
                <n-input 
                  v-model:value="requestData.myName" 
                  placeholder="请输入你的名字"
                  class="modern-input"
                />
              </div>
              
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="TitleIcon" />
                  <span>Ta 的姓名</span>
                </label>
                <n-input 
                  v-model:value="requestData.heName" 
                  placeholder="请输入 Ta 的名字"
                  class="modern-input"
                />
              </div>
            </div>
            
            <!-- 头像上传行 -->
            <div class="form-row">
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="ImageIcon" />
                  <span>你的头像</span>
                </label>
                <n-upload 
                  :custom-request="(options: UploadCustomRequestOptions) => handleOssUpload(options, 'myFaceUrl')"
                  list-type="image-card" 
                  :max="1"
                  class="simple-upload"
                >
                  点击上传
                </n-upload>
              </div>
              
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="ImageIcon" />
                  <span>Ta 的头像</span>
                </label>
                <n-upload 
                  :custom-request="(options: UploadCustomRequestOptions) => handleOssUpload(options, 'heFaceUrl')"
                  list-type="image-card" 
                  :max="1"
                  class="simple-upload"
                >
                  点击上传
                </n-upload>
              </div>
            </div>
            
            <!-- 时间选择行 -->
            <div class="form-row">
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="TimeIcon" />
                  <span>在一起的时间</span>
                </label>
                <n-date-picker 
                  v-model:formatted-value="requestData.date" 
                  value-format="yyyy-MM-dd" 
                  type="date"
                  class="modern-input"
                />
              </div>
              
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="HeartIcon" />
                  <span>已经在一起</span>
                </label>
                <div class="days-display">
                  <span class="days-number">{{ daysTogetherCount }}</span>
                  <span class="days-unit">天</span>
                </div>
              </div>
            </div>
            
            <div class="textarea-group">
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="DescIcon" />
                  <span>上一次七夕发生了什么</span>
                </label>
                <n-input 
                  v-model:value="requestData.firstThing" 
                  type="textarea" 
                  placeholder="分享那些难忘的回忆..."
                  :autosize="{ minRows: 3, maxRows: 5 }"
                  class="modern-textarea"
                />
              </div>
              
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="HeartIcon" />
                  <span>今年想说的话</span>
                </label>
                <n-input 
                  v-model:value="requestData.wantTalk" 
                  type="textarea" 
                  placeholder="想对 Ta 说的心里话..."
                  :autosize="{ minRows: 3, maxRows: 5 }"
                  class="modern-textarea"
                />
              </div>
              
              <div class="input-group">
                <label class="modern-label">
                  <n-icon :component="HeartIcon" />
                  <span>我想...</span>
                </label>
                <n-input 
                  v-model:value="requestData.myTalk" 
                  type="textarea" 
                  placeholder="我想说的是..."
                  :autosize="{ minRows: 3, maxRows: 5 }"
                  class="modern-textarea"
                />
              </div>
            </div>
          </n-card>
        </div>

        <!-- 纪念时刻区域 -->
        <div class="form-section">
          <div class="section-header">
            <n-icon :component="TimeIcon" class="section-icon" />
            <h3 class="section-title">纪念时刻</h3>
            <n-button 
              type="primary" 
              size="medium" 
              @click="addSwiper" 
              class="add-btn"
            >
              💖 添加美好时刻
            </n-button>
          </div>
          
          <div v-for="(item, index) in requestData.commemorateList" :key="item.key" class="commemorate-item">
            <div class="commemorate-header">
              <div class="commemorate-title">
                <n-icon :component="TimeIcon" class="title-icon" />
                <span class="title-text">时刻 {{ index + 1 }}</span>
              </div>
              <n-button 
                v-if="requestData.commemorateList.length > 1"
                size="small" 
                type="error" 
                @click="deleteSwiper(index)" 
                class="delete-btn"
              >
                💔 删除
              </n-button>
            </div>
            
            <n-card class="commemorate-card" hoverable>
              <div class="commemorate-content">
                <!-- 图片上传区域 -->
                <div class="upload-section">
                  <div class="upload-label">
                    <n-icon :component="ImageIcon" />
                    <span>纪念照片</span>
                  </div>
                  <n-upload 
                    :custom-request="(options: UploadCustomRequestOptions) => handleOssUpload(options, 'swiper', index)"
                    list-type="image-card" 
                    :max="1"
                    class="memory-upload"
                  >
                    <div class="upload-trigger">
                      <n-icon :component="ImageIcon" size="24" class="upload-icon" />
                      <div class="upload-text">上传照片</div>
                      <div class="upload-hint">JPG、PNG 格式</div>
                    </div>
                  </n-upload>
                </div>
                
                <!-- 文字信息区域 -->
                <div class="info-section">
                  <div class="input-group">
                    <div class="input-label">
                      <n-icon :component="TitleIcon" />
                      <span>时刻标题</span>
                    </div>
                    <n-input 
                      v-model:value="item.title"
                      placeholder="给这个美好时刻起个名字..." 
                      size="large"
                      class="title-input"
                    />
                  </div>
                  
                  <div class="input-group">
                    <div class="input-label">
                      <n-icon :component="DescIcon" />
                      <span>详细描述</span>
                    </div>
                    <n-input 
                      v-model:value="item.describe"
                      type="textarea" 
                      placeholder="记录下当时的美好瞬间和心情..."
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      class="desc-input"
                    />
                  </div>
                  
                  <div class="input-group">
                    <div class="input-label">
                      <n-icon :component="HeartIcon" />
                      <span>特别回忆</span>
                    </div>
                    <n-input 
                      v-model:value="item.describe2"
                      type="textarea" 
                      placeholder="还有什么特别想说的吗..."
                      :autosize="{ minRows: 2, maxRows: 4 }"
                      class="desc-input"
                    />
                  </div>
                </div>
              </div>
            </n-card>
          </div>
        </div>

        <!-- 照片墙区域 -->
        <div class="form-section">
          <div class="section-header">
            <n-icon :component="ImageIcon" class="section-icon" />
            <h3 class="section-title">你们的照片墙</h3>
          </div>
          
          <n-card class="photo-wall-card" hoverable>
            <div class="photo-wall-content">
              <div class="upload-description">
                <n-icon :component="ImageIcon" size="24" />
                <span>上传你们的美好时光，记录美好瞬间</span>
              </div>
              <n-upload 
                :custom-request="(options: UploadCustomRequestOptions) => handleOssUpload(options, 'imgList')"
                :max="9" 
                list-type="image-card" 
                multiple 
                v-model:file-list="requestData.ImgList"
                class="gallery-upload"
              >
                点击上传照片 (最多9张)
              </n-upload>
            </div>
          </n-card>
        </div>

        <!-- 生成按钮区域 -->
        <div class="form-section">
          <n-card class="generate-card" hoverable>
            <div class="generate-content">
              <div class="generate-description">
                <n-icon :component="HeartIcon" size="32" />
                <div class="generate-text">
                  <h4>准备好了吗？</h4>
                  <p>点击下方按钮，为你们生成专属的爱情网页</p>
                </div>
              </div>
              
              <n-button 
                type="error" 
                size="large"
                round
                @click="handleValidateButtonClick" 
                :loading="loading"
                class="generate-btn"
              >
                <template #icon>
                  <n-icon :component="HeartIcon" />
                </template>
                💕 开始生成专属网页 💕
              </n-button>
              
              <div v-if="urlWeb" class="result-link">
                <div class="result-header">
                  <n-icon :component="HeartIcon" />
                  <span>你的专属网页已生成</span>
                </div>
                <n-button 
                  type="error" 
                  ghost
                  size="large"
                  @click="openNew(urlWeb)"
                  class="link-btn"
                >
                  <template #icon>
                    <n-icon :component="HeartIcon" />
                  </template>
                  立即查看
                </n-button>
                <div class="link-url">{{ urlWeb }}</div>
              </div>
            </div>
          </n-card>
        </div>
      </n-form>
    </n-spin>

    </div>
    
    <n-divider />
    
    <!-- 使用指南 -->
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script lang="ts" setup>
import {reactive, ref, computed} from 'vue';
import type {FormInst, FormItemRule, UploadFileInfo, UploadCustomRequestOptions} from 'naive-ui';
import {generate} from '@/api/entertainment/websiteGenerate/index';
import {getUpToken} from '@/api/oss/index';
import {generateOssKey, getOssUrl} from '@/utils/oss';
import {
  TimeOutline as TimeIcon,
  ImageOutline as ImageIcon,
  DocumentTextOutline as TitleIcon,
  ChatbubbleEllipsesOutline as DescIcon,
  HeartOutline as HeartIcon
} from '@vicons/ionicons5';
import {NIcon, useMessage} from 'naive-ui';
import PageCard from '@/components/PageCard.vue';
import UsageGuide from '@/components/UsageGuide.vue';

const formRef = ref<FormInst | null>(null);
const loading = ref(false);
const message = useMessage();

const requestData = reactive({
  myName: '',
  date: '2023-08-22',
  heName: '',
  myFaceUrl: '',
  heFaceUrl: '',
  firstThing: '',
  wantTalk: '',
  myTalk: '',
  ImgList: [] as UploadFileInfo[],
  commemorateList: [{key: Date.now(), title: '', describe: '', url: '', describe2: ''}]
});

const urlWeb = ref('');

// 计算在一起的天数
const daysTogetherCount = computed(() => {
  if (!requestData.date) return 0;
  
  const startDate = new Date(requestData.date);
  const today = new Date();
  
  // 将今天的时间设置为当天开始，避免时差影响
  today.setHours(0, 0, 0, 0);
  startDate.setHours(0, 0, 0, 0);
  
  const timeDifference = today.getTime() - startDate.getTime();
  const daysDifference = Math.floor(timeDifference / (1000 * 3600 * 24));
  
  return daysDifference >= 0 ? daysDifference : 0;
});

// OSS 直传处理函数
const handleOssUpload = async (options: UploadCustomRequestOptions, type: string, index?: number) => {
  const { file, onFinish, onError, onProgress } = options;
  
  if (!file.file) {
    onError();
    return;
  }

  try {
    // 显示上传进度
    onProgress({ percent: 30 });
    
    // 1. 获取上传 token
    const token = await getUpToken();
    
    // 2. 生成唯一的文件 key
    const key = generateOssKey(file.file, 'qixi-special');
    
    // 3. 构建上传表单数据
    const formData = new FormData();
    formData.append('key', key);
    formData.append('token', token);
    formData.append('file', file.file);
    
    onProgress({ percent: 60 });
    
    // 4. 直接上传到七牛云
    const uploadUrl = import.meta.env.VITE_OSS_UPLOAD_URL;
    const response = await fetch(uploadUrl, {
      method: 'POST',
      body: formData
    });

    if (!response.ok) {
      throw new Error(`上传失败: ${response.status}`);
    }

    const result = await response.json();
    
    // 5. 拼接完整的文件 URL
    const fullUrl = getOssUrl(result.key || key);
    
    // 6. 根据类型更新对应的数据
    if (type === 'myFaceUrl') {
      requestData.myFaceUrl = fullUrl;
      file.url = fullUrl;
    } else if (type === 'heFaceUrl') {
      requestData.heFaceUrl = fullUrl;
      file.url = fullUrl;
    } else if (type === 'swiper' && index !== undefined) {
      requestData.commemorateList[index].url = fullUrl;
      file.url = fullUrl;
    } else if (type === 'imgList') {
      file.url = fullUrl;
    }
    
    onProgress({ percent: 100 });
    onFinish();
    message.success('上传成功');
    
  } catch (error) {
    console.error('OSS upload error:', error);
    message.error('上传失败：' + (error instanceof Error ? error.message : '未知错误'));
    onError();
  }
};


function handleValidateButtonClick() {
  loading.value = true;
  const finalImgList = requestData.ImgList.map(file => file.url || '').filter(url => url !== '');
  
  const payload = {
    ...requestData,
    ImgList: finalImgList
  };
  
  generate({
    templateId: 1,
    json: JSON.stringify(payload)
  }).then((res: { data: any; }) => {
    urlWeb.value = res.data;
  }).catch((err: Error) => {
    console.error("生成失败:", err);
  }).finally(() => {
    loading.value = false;
  });
}

function addSwiper() {
  requestData.commemorateList.push({key: Date.now(), title: '', describe: '', url: '', describe2: ''});
}

function deleteSwiper(index: number) {
  if (requestData.commemorateList.length > 1) {
    requestData.commemorateList.splice(index, 1);
  }
}

function openNew(url: string | URL | undefined) {
  if(url) window.open(url);
}

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '填写你和Ta的基本信息（姓名、头像）',
    '选择你们在一起的纪念日',
    '填写想要展示的文字内容',
    '上传纪念时刻的照片和描述',
    '上传你们的照片墙（最多9张）',
    '点击"点我生成"按钮，获取专属网页链接'
  ],
  tips: [
    '所有照片建议使用清晰的图片，支持JPG/PNG格式',
    '纪念时刻可以添加多个，每个包含一张图片和文字描述',
    '生成的网页永久有效，可以分享给Ta',
    '适合七夕、情人节、纪念日等特殊日子使用'
  ],
  example: '为你们的爱情故事创建一个独特的网页，记录美好时刻'
};

const rules: Record<string, FormItemRule | FormItemRule[]> = {
    myName: { required: true, message: '请输入你的姓名', trigger: 'blur' },
    heName: { required: true, message: '请输入 Ta 的姓名', trigger: 'blur' },
    date: { required: true, message: '请选择在一起的时间', trigger: 'change' },
};

</script>

<style lang="less" scoped>
// 整个页面的基础样式
.website-generator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}



.main-content {
  .beautiful-form {
    .form-section {
      margin-bottom: 40px;
      
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        padding: 16px 20px;
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
        border-radius: 16px;
        // box-shadow: 0 4px 15px rgba(240, 82, 74, 0.3);
        
        .section-icon {
          color: #ffffff;
          font-size: 24px;
          background: rgba(255, 255, 255, 0.2);
          padding: 8px;
          border-radius: 50%;
        }
        
        .section-title {
          font-size: 20px;
          font-weight: 600;
          color: #ffffff;
          margin: 0;
          flex: 1;
          margin-left: 12px;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .add-btn {
          background: rgba(255, 255, 255, 0.95) !important;
          color: #ff9a9e !important;
          border: 1px solid rgba(255, 154, 158, 0.3) !important;
          font-weight: 600;
          box-shadow: 0 2px 8px rgba(255, 154, 158, 0.2);
          border-radius: 20px !important;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          &:hover {
            background: #ffffff !important;
            color: #ff8a95 !important;
            border-color: #ff8a95 !important;
            transform: scale(1.05) translateY(-1px);
            box-shadow: 0 6px 16px rgba(255, 154, 158, 0.3);
          }
          
          :deep(.n-button__icon) {
            color: #ff9a9e;
            transition: color 0.3s ease;
          }
          
          &:hover :deep(.n-button__icon) {
            color: #ff8a95;
          }
        }
      }
    }
  }
}

// 主要信息卡片样式
.info-card {
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
  }
  
  :deep(.n-card__content) {
    padding: 32px;
  }
}

.form-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  
  &.single-row {
    .input-group {
      max-width: 300px;
    }
  }
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
    
    &.single-row .input-group {
      max-width: none;
    }
  }
  
  .input-group {
    flex: 1;
  }
}

.textarea-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.input-group {
  .modern-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    
    .n-icon {
      color: #6366f1;
      font-size: 18px;
      background: rgba(99, 102, 241, 0.1);
      padding: 4px;
      border-radius: 6px;
    }
  }
  
  .modern-input,
  .modern-textarea {
    :deep(.n-input) {
      border-radius: 12px;
      border: 2px solid #e5e7eb;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #d1d5db;
      }
    }
    
    :deep(.n-input__input-el) {
      padding: 14px 16px;
      font-size: 15px;
      color: #374151;
    }
    
    :deep(.n-input--focus) {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
  }
  
  // 简单上传组件样式
  .simple-upload {
    :deep(.n-upload-trigger) {
      width: 100%;
    }
    
    :deep(.n-upload-file-list) {
      margin-top: 12px;
    }
  }

  // 天数显示样式
  .days-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
    border: 2px solid #ff9a9e;
    border-radius: 16px;
    height: 38px;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
      pointer-events: none;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
    }
    
    .days-number {
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 1;
      line-height: 1;
    }
    
    .days-unit {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 1;
      line-height: 1;
    }
  }
}

// 照片墙样式
.photo-wall-card {
  border: none;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
  }
  
  :deep(.n-card__content) {
    padding: 32px;
  }
}

.photo-wall-content {
  .upload-description {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.1);
    
    .n-icon {
      color: #6366f1;
      flex-shrink: 0;
    }
    
    span {
      font-size: 15px;
      color: #374151;
      font-weight: 500;
    }
  }
  
  .gallery-upload {
    :deep(.n-upload-file-list) {
      gap: 12px;
      margin-top: 16px;
    }
    
    :deep(.n-upload-trigger) {
      width: 100%;
      display: block;
    }
  }
}

// 生成按钮区域样式
.generate-card {
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
  }
  
  :deep(.n-card__content) {
    padding: 40px;
  }
}

.generate-content {
  text-align: center;
  
  .generate-description {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 32px;
    
    .n-icon {
      color: #ff9a9e;
      background: linear-gradient(135deg, rgba(255, 154, 158, 0.1) 0%, rgba(254, 207, 239, 0.15) 100%);
      padding: 12px;
      border-radius: 50%;
    }
    
    .generate-text {
      text-align: left;
      
      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #374151;
        margin: 0 0 4px 0;
      }
      
      p {
        font-size: 15px;
        color: #6b7280;
        margin: 0;
      }
    }
  }
  
  .generate-btn {
    font-size: 16px;
    font-weight: 600;
    padding: 12px 32px;
    height: auto;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
    border-color: #ff9a9e !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(255, 154, 158, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-3px) scale(1.02);
      background: linear-gradient(135deg, #ff8a95 0%, #fbc7d4 50%, #f6a6cd 100%) !important;
      box-shadow: 0 8px 30px rgba(255, 154, 158, 0.6);
      border-color: #ff8a95 !important;
    }
    
    &:active {
      transform: translateY(-1px) scale(1.01);
    }
    
    :deep(.n-button__icon) {
      color: #ffffff;
      animation: heartbeat 1.5s ease-in-out infinite;
    }
  }
  
  .result-link {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    
    .result-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;
      color: #E07875;
      font-weight: 600;
      
      .n-icon {
        font-size: 20px;
      }
    }
    
    .link-btn {
      margin-bottom: 12px;
      border-color: #059669;
      color: #059669;
      
      &:hover {
        background: rgba(34, 197, 94, 0.1);
      }
    }
    
    .link-url {
      font-size: 14px;
      color: #6b7280;
      word-break: break-all;
    }
  }
}



// 纪念时刻样式（保持原有的精美样式）
.commemorate-item {
  margin-bottom: 28px;
  position: relative;
  
  .commemorate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%) !important;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
    
    .commemorate-title {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .title-icon {
        color: #ffffff;
        font-size: 20px;
        background: rgba(255, 255, 255, 0.3);
        padding: 6px;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
      }
      
      .title-text {
        font-size: 17px;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      }
    }
    
    .delete-btn {
      background: rgba(255, 255, 255, 0.95) !important;
      color: #ff6b9d !important;
      border: 1px solid rgba(255, 107, 157, 0.3) !important;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(255, 107, 157, 0.2);
      border-radius: 16px !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      
      &:hover {
        background: #ffffff !important;
        color: #ff5a92 !important;
        border-color: #ff5a92 !important;
        transform: scale(1.08) translateY(-1px);
        box-shadow: 0 6px 16px rgba(255, 107, 157, 0.3);
      }
      
      &:active {
        transform: scale(1.02) translateY(0px);
      }
      
      :deep(.n-button__icon) {
        color: #ff6b9d;
        transition: all 0.3s ease;
      }
      
      &:hover :deep(.n-button__icon) {
        color: #ff5a92;
        animation: shake 0.6s ease-in-out;
      }
    }
  }
  
  .commemorate-card {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    
    &:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
      transform: translateY(-4px);
    }
    
    :deep(.n-card__content) {
      padding: 28px;
    }
  }
  
  .commemorate-content {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 24px;
    }
  }
  
  .upload-section {
    flex: 0 0 160px;
    
    @media (max-width: 768px) {
      flex: none;
    }
    
    .upload-label {
      font-size: 15px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      
      .n-icon {
        color: #6366f1;
        font-size: 18px;
      }
    }
    
    .memory-upload {
      :deep(.n-upload-trigger) {
        width: 100%;
        display: block;
      }
      
      :deep(.n-upload-file-list) {
        gap: 8px;
        margin-top: 8px;
      }
      
      .upload-trigger {
        width: 160px;
        height: 110px;
        border: 2px dashed #d1d5db;
        border-radius: 10px;
        background: #f9fafb;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #6366f1;
          background: #f3f4f6;
          
          .upload-icon {
            color: #6366f1;
          }
          
          .upload-text {
            color: #6366f1;
          }
        }
        
        .upload-icon {
          color: #9ca3af;
          transition: color 0.3s ease;
        }
        
        .upload-text {
          font-size: 13px;
          font-weight: 500;
          color: #374151;
          transition: color 0.3s ease;
        }
        
        .upload-hint {
          font-size: 11px;
          color: #9ca3af;
        }
        
        @media (max-width: 768px) {
          width: 100%;
          height: 100px;
        }
      }
    }
  }
  
  .info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .input-group {
    .input-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #374151;
      
      .n-icon {
        color: #6366f1;
        font-size: 18px;
        background: rgba(99, 102, 241, 0.1);
        padding: 4px;
        border-radius: 6px;
      }
    }
    
    .title-input {
      :deep(.n-input) {
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #d1d5db;
        }
      }
      
      :deep(.n-input__input-el) {
        font-size: 16px;
        font-weight: 600;
        padding: 14px 16px;
        color: #1f2937;
      }
      
      :deep(.n-input--focus) {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
      }
    }
    
    .desc-input {
      :deep(.n-input) {
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #d1d5db;
        }
      }
      
      :deep(.n-input__input-el) {
        line-height: 1.6;
        padding: 14px 16px;
        color: #374151;
        font-size: 15px;
      }
      
      :deep(.n-input--focus) {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
      }
    }
  }
}

// 响应式优化
@media (max-width: 1024px) {
  .commemorate-item {
    .commemorate-content {
      gap: 24px;
      
      .upload-section {
        flex: 0 0 140px;
        
        .upload-trigger {
          width: 140px;
          height: 100px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .commemorate-item {
    margin-bottom: 24px;
    
    .commemorate-header {
      margin-bottom: 14px;
      padding: 10px 14px;
      
      .commemorate-title {
        .title-icon {
          font-size: 18px;
          padding: 5px;
        }
        
        .title-text {
          font-size: 16px;
        }
      }
    }
    
    .commemorate-card :deep(.n-card__content) {
      padding: 20px;
    }
    
    .info-section {
      gap: 20px;
    }
    
    .input-group .input-label {
      font-size: 14px;
      
      .n-icon {
        font-size: 16px;
      }
    }
  }
}

// 全局美化
.commemorate-item {
  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover::before {
    opacity: 0.5;
  }
}

// 心跳动画
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

// 摇摆动画
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>
